<template>
  <div class="pub-radio" :class="value ? 'pub-radio-active' : ''">
  </div>
</template>

<script>
import protal from "@/api/protal"

export default {
  name: 'pub-radio',
  props: {
    value: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="less" scoped>
@media screen and (min-width: 768px) {
  .pub-radio {
    width: 18px;
    height: 18px;
    background: url(https://static.inclusionconf.com/static/images/stage-radio.png);
    background-size: cover;

    &.pub-radio-active {
      background-image: url(https://static.inclusionconf.com/static/images/stage-radio-active.png);
    }
  }
}
@media screen and (max-width: 767px) {
  .pub-radio {
    width: 14px;
    height: 14px;
    background: url(https://static.inclusionconf.com/static/images/stage-radio.png);
    background-size: cover;

    &.pub-radio-active {
      background-image: url(https://static.inclusionconf.com/static/images/stage-radio-active.png);
    }
  }
}
</style>